<template>
    <transition name="slide-right">
        <v-touch class="content content-size" v-on:swiperight="">
            <div class="content-title">
                <span class="title-left mui-icon mui-icon-back" @click="backRoute()"></span>
                <span>ETSC</span>
                <span class="title-right">
                    <img src="@/assets/img/saomiao.png" alt="" @click="changeRoute('/wallet/importScan', {tab: tab})">
                </span>
            </div>
            <div class="lead-nav">
                <div :class="tab=='keystore'?'active':''" @click="tab='keystore'">Keystore</div>
                <div :class="tab=='mnemonic'?'active':''" @click="tab='mnemonic'">{{ $t('m.wallet.import.prompt[0]') }}</div>
                <div :class="tab=='pKey'?'active':''" @click="tab='pKey'">{{ $t('m.wallet.import.prompt[1]') }}</div>
            </div>
            <div v-show="tab=='keystore'">
                <div class="lead-hint">{{ $t('m.wallet.import.prompt[2]') }}</div>
                <div class="wallet-textarea">
                    <textarea :placeholder="$t('m.wallet.import.prompt[3]')" v-model="keystore.text"></textarea>
                </div>
                <div class="wallet-password">
                    <input :type="keystore.pwdShow?'text':'password'" :placeholder="$t('m.wallet.import.prompt[4]')" v-model="keystore.pwd">
                    <img src="@/assets/img/closeeyes.png" alt="" @click="keystore.pwdShow = true" v-show="!keystore.pwdShow">
                    <img src="@/assets/img/createwallet/eye-open.png" alt="" class="pwd-close-icon" @click="keystore.pwdShow = false" v-show="keystore.pwdShow">
                </div>
                <div class="content-start" :class="keystore.button?'li-active':''" @click="keystoreImport()">{{ $t('m.wallet.import.prompt[5]') }}</div>
                <!--TODO-->
                <!--<div class="content-understand"><img src="@/assets/img/book.png" alt="">&nbsp;&nbsp;了解 Keystore</div>-->
            </div>
            <div v-show="tab=='mnemonic'">
                <div class="lead-hint">{{ $t('m.wallet.import.prompt[6]') }}</div>
                <div class="mnemonic-textarea">
                    <textarea :placeholder="$t('m.wallet.import.prompt[7]')" v-model="mnemonic.text"></textarea>
                </div>
                <div class="mnemonic-path">
                    <div class="path-choose">
                        <span>{{ $t('m.wallet.import.prompt[8]') }}</span>
                        <!--<span>默认<img src="@/assets/img/rightwhite.png" alt=""></span>-->
                        <span>{{ $t('m.wallet.import.prompt[9]') }}</span>
                    </div>
                    <input type="text" value="m/44'/60'/0'/0/0" disabled>
                </div>
                <div class="mnemonic-set">
                    <h1>{{ $t('m.wallet.import.prompt[10]') }}&nbsp;<img src="@/assets/img/i.png" alt=""></h1>
                    <input :type="mnemonic.pwdShow?'text':'password'" :placeholder="$t('m.wallet.import.prompt[4]')" maxlength="20" size="20" class="mnemonic-password" v-model="mnemonicPwd">
                    <span class="mnemonic-intension">
                        <ul class="intension-line">
                            <li :class="mnemonic.pwdStrength.mode>0?'li-active':''"></li>
                            <li :class="mnemonic.pwdStrength.mode>1?'li-active':''"></li>
                            <li :class="mnemonic.pwdStrength.mode>2?'li-active':''"></li>
                            <li :class="mnemonic.pwdStrength.mode>3?'li-active':''"></li>
                        </ul>
                        <span>{{ mnemonic.pwdStrength.msg }}</span>
                    </span>
                    <div class="mnemonic-suggest">{{ mnemonic.pwdStrength.line }}</div>
                    <input :type="mnemonic.pwdShow?'text':'password'" :placeholder="$t('m.wallet.import.prompt[17]')" class="mnemonic-repassword" v-model="mnemonic.rePwd">

                    <img src="@/assets/img/closeeyes.png" alt="" @click="mnemonic.pwdShow = true" v-if="!mnemonic.pwdShow">
                    <img src="@/assets/img/createwallet/eye-open.png" alt="" @click="mnemonic.pwdShow = false" v-if="mnemonic.pwdShow">

                    <input type="text" :placeholder="$t('m.wallet.import.prompt[18]')" class="mnemonic-information" v-model="mnemonic.tip">
                </div>
                <div class="content-start" :class="mnemonic.button?'li-active':''" @click="mnemonicImport()">{{ $t('m.wallet.import.prompt[5]') }}</div>
                <!--TODO-->
                <!--<div class="content-understand"><img src="@/assets/img/book.png" alt="">&nbsp;&nbsp;了解 助记词</div>-->
            </div>
            <div v-show="tab=='pKey'">
                <div class="lead-hint">{{ $t('m.wallet.import.prompt[19]') }}</div>
                <div class="key-textarea">
                    <textarea :placeholder="$t('m.wallet.import.prompt[20]')" v-model="pKey.text"></textarea>
                </div>
                <div class="key-set">
                    <h1>{{ $t('m.wallet.import.prompt[10]') }}&nbsp;<img src="@/assets/img/i.png" alt=""></h1>
                    <input :type="pKey.pwdShow?'text':'password'" :placeholder="$t('m.wallet.import.prompt[4]')" maxlength="20" size="20" class="mnemonic-password" v-model="pKeyPwd">
                    <span class="mnemonic-intension">
                        <ul class="intension-line">
                            <li :class="pKey.pwdStrength.mode>0?'li-active':''"></li>
                            <li :class="pKey.pwdStrength.mode>1?'li-active':''"></li>
                            <li :class="pKey.pwdStrength.mode>2?'li-active':''"></li>
                            <li :class="pKey.pwdStrength.mode>3?'li-active':''"></li>
                        </ul>
                        <span>{{ pKey.pwdStrength.msg }}</span>
                    </span>
                    <div class="mnemonic-suggest">{{ pKey.pwdStrength.line }}</div>
                    <input :type="pKey.pwdShow?'text':'password'" :placeholder="$t('m.wallet.import.prompt[17]')" class="mnemonic-repassword" v-model="pKey.rePwd">

                    <img src="@/assets/img/closeeyes.png" alt="" @click="pKey.pwdShow = true" v-if="!pKey.pwdShow">
                    <img src="@/assets/img/createwallet/eye-open.png" alt="" @click="pKey.pwdShow = false" v-if="pKey.pwdShow">

                    <input type="text" :placeholder="$t('m.wallet.import.prompt[18]')" class="mnemonic-information" v-model="pKey.tip">
                </div>
                <div class="content-start" :class="pKey.button?'li-active':''" @click="pKeyImport()">{{ $t('m.wallet.import.prompt[5]') }}</div>
                <!--TODO-->
                <!--<div class="content-understand"><img src="@/assets/img/book.png" alt="">&nbsp;&nbsp;了解 明文私钥</div>-->
            </div>
            <Loading></Loading>
            <Success></Success>
        </v-touch>
    </transition>
</template>
<script>
    /* eslint-disable */
    import {importByKeystore, importByPrivate, importByWord} from '@/assets/js/etherjs/wallet'
    import {myAlert} from "@/assets/js/h5plus/nativeUI";
    import {pwd} from '@/assets/js/form/index'


    export default {
        name: 'wallet_import',
        create() {

        },
        mounted() {
            this.tab = this.$route.query.tab ? this.$route.query.tab : 'keystore';
            let value = this.$route.query.value ? this.$route.query.value : '';
            switch (this.tab) {
                case "keystore":
                    this.keystore.text = value;
                    break;
                case "mnemonic":
                    this.mnemonic.text = value;
                    break;
                case "pKey":
                    this.pKey.text = value;
                    break;
            }
            setInterval(() => {
                this.canCreate();
            }, 500);
        },
        watch: {
            mnemonicPwd: function (v) {
                this.mnemonic.pwdStrength.mode = pwd.checkStrong(v);
                if (this.mnemonic.pwdStrength.mode < 2) {
                    this.mnemonic.pwdStrength.msg = this.$t('m.wallet.import.prompt[11]');
                } else if (this.mnemonic.pwdStrength.mode < 3) {
                    this.mnemonic.pwdStrength.msg = this.$t('m.wallet.import.prompt[12]');
                } else if (this.mnemonic.pwdStrength.mode < 4) {
                    this.mnemonic.pwdStrength.msg = this.$t('m.wallet.import.prompt[13]');
                } else {
                    this.mnemonic.pwdStrength.msg = this.$t('m.wallet.import.prompt[14]');
                }
                if (this.mnemonic.pwdStrength.mode > 0) {
                    this.mnemonic.pwdStrength.line = v.length + this.$t('m.wallet.import.prompt[16]');
                } else {
                    this.mnemonic.pwdStrength.line = this.$t('m.wallet.import.prompt[15]');
                }
            },
            pKeyPwd: function (v) {
                this.pKey.pwdStrength.mode = pwd.checkStrong(v);
                if (this.pKey.pwdStrength.mode < 2) {
                    this.pKey.pwdStrength.msg = this.$t('m.wallet.import.prompt[11]');
                } else if (this.pKey.pwdStrength.mode < 3) {
                    this.pKey.pwdStrength.msg = this.$t('m.wallet.import.prompt[12]');
                } else if (this.pKey.pwdStrength.mode < 4) {
                    this.pKey.pwdStrength.msg = this.$t('m.wallet.import.prompt[13]');
                } else {
                    this.pKey.pwdStrength.msg = this.$t('m.wallet.import.prompt[14]');
                }
                if (this.pKey.pwdStrength.mode > 0) {
                    this.pKey.pwdStrength.line = v.length + this.$t('m.wallet.import.prompt[16]');
                } else {
                    this.pKey.pwdStrength.line = this.$t('m.wallet.import.prompt[15]');
                }
            }
        },
        data() {
            return {
                tab: "keystore",
                keystore: {
                    text: "",
                    pwd: "",
                    pwdShow: false,
                    button: false,
                },
                mnemonic: {
                    text: "",
                    rePwd: "",
                    tip: "",
                    pwdShow: false,
                    button: false,
                    pwdStrength: {
                        msg: this.$t('m.wallet.import.prompt[11]'),
                        mode: 0,
                        line: this.$t('m.wallet.import.prompt[15]'),
                    },
                },
                mnemonicPwd: "",
                pKey: {
                    text: "",
                    rePwd: "",
                    tip: "",
                    pwdShow: false,
                    button: false,
                    pwdStrength: {
                        msg: this.$t('m.wallet.import.prompt[11]'),
                        mode: 0,
                        line: this.$t('m.wallet.import.prompt[15]'),
                    },
                },
                pKeyPwd: "",
            }
        },
        methods: {
            keystoreImport: function () {
                if (!this.keystore.button) return;
                this.aLoading({
                    show: true,
                    tip: this.$t('m.component.alert_shot.prompt1[6]')
                });
                let that = this;
                setTimeout(() => {
                    importByKeystore({
                        keystore: that.keystore.text,
                        pwd: that.keystore.pwd
                    }).then(() => {
                        return that.aSuccess({
                            show: true,
                            tip: this.$t('m.component.alert_shot.prompt1[2]'),
                        });
                    }).then(() => {
                        that.changeRoute("/wallet/list");
                    }).catch((e) => {
                        console.log(e);
                        that.aLoading({
                            show: false,
                            tip: this.$t('m.component.alert_shot.prompt1[5]')
                        });
                        if ("Error: invalid password" == e.toString()) {
                            myAlert({
                                msg: this.$t('m.wallet.import.prompt[21]'),
                                button: this.$t('m.wallet.import.prompt[22]')
                            });
                        } else {
                            myAlert({
                                msg: this.$t('m.component.alert_little.msg2.tip'),
                                button: this.$t('m.component.alert_little.msg2.button')
                            });
                        }

                    });
                }, 200);
            },
            mnemonicImport: function () {
                if (!this.mnemonic.button) return;
                this.aLoading({
                    show: true,
                    tip: this.$t('m.component.alert_shot.prompt1[7]')
                });
                let that = this;
                setTimeout(() => {
                    importByWord({
                        mnemonic: that.mnemonic.text,
                        pwd: that.mnemonicPwd,
                        tip: that.mnemonic.tip
                    }).then(() => {
                        return that.aSuccess({
                            show: true,
                            tip: this.$t('m.component.alert_shot.prompt1[2]'),
                        });
                    }).then(() => {
                        that.changeRoute("/wallet/list");
                    }).catch((e) => {
                        console.log(e);
                        that.aLoading({
                            show: false,
                        });
                        myAlert({
                            msg: this.$t('m.component.alert_shot.prompt1[5]'),
                            button: this.$t('m.wallet.import.prompt[22]')
                        });

                    });
                }, 200);

            },
            pKeyImport: function () {
                if (!this.pKey.button) return;
                this.aLoading({
                    show: true,
                    tip: this.$t('m.component.alert_shot.prompt1[8]')
                });
                let that = this;
                setTimeout(() => {
                    importByPrivate({
                        privateKey: that.pKey.text,
                        pwd: that.pKeyPwd,
                        tip: that.pKey.tip
                    }).then(() => {
                        return that.aSuccess({
                            show: true,
                            tip: this.$t('m.component.alert_shot.prompt1[2]'),
                        });
                    }).then(() => {
                        that.changeRoute("/wallet/list");
                    }).catch((e) => {
                        console.log(e);
                        that.aLoading({
                            show: false,
                            tip: this.$t('m.component.alert_shot.prompt1[5]')
                        });
                        myAlert({
                            msg: this.$t('m.component.alert_shot.prompt1[5]'),
                            button: this.$t('m.wallet.import.prompt[22]')
                        });
                    });
                }, 200);
            },
            canCreate: function () {
                this.keystore.button = this.keystore.text != '' && this.keystore.pwd != '';
                this.mnemonic.button = this.mnemonic.text !== '' && this.mnemonic.pwdStrength.mode > 0 && this.mnemonic.rePwd !== '';
                this.pKey.button = this.pKey.text !== '' && this.pKey.pwdStrength.mode > 0 && this.pKey.rePwd !== '';
            },
        }
    }
</script>
<style scoped>
    @import '../../assets/css/leadKey.css';
    @import '../../assets/css/leadMnemonic.css';
    @import '../../assets/css/leadWallet.css';

    .li-active {
        background: #1087CD !important;
    }

    .content-size {
        font-family: sans-serif;
    }
</style>